<#if (comments?exists && comments?size > 0)>
	<style type="text/css">
	.commentlist-list {background:#f8f8f8;margin:0 0 10px 0;}
	.commentlist-list .msg{padding: 15px 10px 10px 0px;border-bottom:1px solid #eaeaea;}
	.commentlist-list ul, .commentlist-list li{overflow: hidden; height: 100%;}
	.commentlist-list li:hover{background-color:#F2F2F2;}
	.commentlist-list ul.parents {margin:0px;}
	.commentlist-list ul.parents li.msg dl{overflow: hidden; height: 100%;} 
	.commentlist-list ul.parents li.msg dl dd .faceimg{ margin-right:8px;clear:left; float:left;box-shadow: 1px 1px 3px rgba(20, 20, 20, 0.1);border-radius: 3px;display: block;width: 40px;height: 40px;padding: 2px;background:#fff;border: 1px solid #cdcdcd;}
	.commentlist-list ul.parents li.msg dl dd .faceimg img{max-width:40px;max-height:40px;}
	.commentlist-list ul.parents li.msg dl dd .comment_name{font-size: 14px;font-weight: 700;}
	.commentlist-list ul.parents li.msg dl dd #post{padding-left:8px;font-size: 11px; font-weight: 100; color: #8D8D8D; }
	.commentlist-list ul.parents li.msg dl dd .revertcomment{padding-left:8px;}
	.commentlist-list ul.parents li.msg dl dd .revertcomment a{color: #666666;text-decoration: none;}
	.commentlist-list ul.parents li.msg dl dd{font-weight: 100; font-size: 14px;} 
	.commentlist-list ul.parents li.msg dl dd .num{display: inline-block;float: right;width: 75px;text-align: right;font-size: 14px;font-weight: normal;color: #c8c8c8;}
	.commentlist-list ul.parents li.msg dl dd .num cite {font-size: 24px;font-style: italic;font-weight: bold;line-height: 48px;}
	.commentlist-list ul.parents li.msg dl dd cite a:hover{color: #00A1C9; text-decoration: underline;} 
	.commentlist-list ul.parents li.msg dl dd span a{text-decoration: underline; color: #999999;}
	.commentlist-list ul.parents li.msg dl dd span a:hover{text-decoration: none; color: #00A1C9;}
	.commentlist-list ul.parents li.msg dl dd span.comment-reply-link{background-position: 0 0; padding:0 8px 0 18px;}
	.commentlist-list ul.parents .msg .msgarticle blockquote {padding:8px 12px 8px 12px; background:#FCFAF7;border:1px dashed #CCC;margin:10px 0;}
	.commentlist-list ul.parents .msg .msgarticle{padding:5px 10px;margin:0;line-height:160%;}
	
	.commentlist-list .quotewap {
		margin-left: 48px;
		margin-right:40px;
	}
	
	.commentlist-list .quotetop {
		background: #E4EAF2 url(${template_url}/images/css_img_quote.gif) no-repeat right;
		box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
		border-bottom: 0;
		border-left: 4px solid #8394B2;
		color: black;
		font-weight: bold;
		font-size: 12px;
		padding: 3px;
		border: none;
		box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
		padding: 5px;
	}
	
	.commentlist-list .quotemain {
		background: #FAFCFE;
		border-left: 4px solid #8394B2;
		border-top: 0;
		color: #465584;
		padding: 2px 2px 2px 2px;
		margin: 0 0 10px 0;
		border: none;
		box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
		padding: 5px;
	}
	.commentlist-list .replycontent {
		margin-left: 48px;
	}
	
	</style>
	<div class="commentlist-list">
		<ul class="parents">
			<#list comments as comment>
				<li class="msg" id="comment-${comment.id}">
					<dl>
						<dd>
							<i class="faceimg"><img class="avatar" src="<@gravatar email=comment.email />" /></i>
							<cite class="comment_name">
								<a href="${comment.url!"#"}" rel="nofollow" target="_blank">${comment.author}</a>
							</cite>
							<small id="post">Post:${comment.createTime?string("yyyy/MM/dd HH:mm:ss")}</small>
							<span class="revertcomment"><a href="javascript:showReply(${comment.id});">回复该留言</a></span>
							<span class="num"><cite>${comment_index + 1}</cite>#</span>
							<div class="msgarticle">
								<#if comment.parent?exists>
									<div class="quotewap">
										<div class="quotetop">@${comment.parent.author}</div>
										<div class="quotemain">
											${comment.parent.content!""}
										</div>
									</div>
									<div class="replycontent">
										${comment.content!""}
									</div>
								<#else>								
									${comment.content!""}
								</#if>
							</div>
						</dd>
					</dl>
				</li>
			</#list>
		</ul>
	</div>
</#if>


<#if post.commentStatus == "open">
	<style type="text/css">
	.comment-form {
		margin-left:10px;
	}
	.comment-form .text {
		border: 1px solid #ddd;
		color: #333;
		font-size: 14px;
		background: #FCFCFC;
	}
	.comment-form-author .text,
	.comment-form-url .text,
	.comment-form-email .text {
		width: 200px;
		height: 25px;
		line-height: 25px;
		margin-bottom: 3px;
		vertical-align: middle;
		width: 220px;
	}
	.comment-form textarea.text {
		padding: 5px;
		line-height: 1.8;
		width: 97%;
		height: 150px;
		font-size: 14px;
		color: #333;
		margin-bottom: 6px;
	}
	.comment-form .submit {
		background: #D14836;
		border: none;
		color: #fff;
		cursor: pointer;
		padding: 4px 12px;
		vertical-align: middle;
		width: auto;
		line-height: 28px;
		font-size: 14px;
	}
	.comment-form .submit:hover {
		background: #333;
	}
	</style>
	<form id="comment-form" class="comment-form" target="_self" method="post" action="${base}/comment/post">
		<input type="hidden" name="postId" value="${postId}" />
		<div class="item" id="replycontainer" style="display:none;">
			<div id="replymsg"></div>
		</div>
		<div class="item info">
			<p class="comment-form-author">
				<input name="author" type="text" class="text" value="${author?default("")}" placeholder="  昵称 *"/>
			</p>
			<p class="comment-form-url">
				<input name="url" type="text" class="text" value="${url?default("")}" placeholder="  主页"/>
			</p>
			<p class="comment-form-email">
				<input name="email" type="text" class="text" value="${email?default("")}" placeholder="  邮箱"/>
			</p>
		</div>
		<div class="item">
			<textarea name="content" class="text"></textarea>
		</div>
		<div class="item">
			<input type="button" class="submit" value="发表评论" id="btnPostComment" onclick="doSubmit()" />
		</div>
	</form>
	
	<!--回复框-->
	<div id="replyform" style="display:none;">
		<form id="reply-form" class="comment-form" target="_self" method="post" action="${base}/comment/post">
			<input type="hidden" name="postId" value="${postId}" />
			<input type="hidden" name="reply_comment" id="reply_comment" />
			<div class="item" id="replycontainer" style="display:none;">
				<div id="replymsg"></div>
			</div>
			<div class="item info">
				<p class="comment-form-author">
					<input name="author" type="text" class="text" value="${author?default("")}" placeholder="  昵称 *"/>
				</p>
				<p class="comment-form-url">
					<input name="url" type="text" class="text" value="${url?default("")}" placeholder="  主页"/>
				</p>
				<p class="comment-form-email">
					<input name="email" type="text" class="text" value="${email?default("")}" placeholder="  邮箱"/>
				</p>
			</div>
			<div class="item">
				<textarea name="content" class="text" style="width:500px;"></textarea>
			</div>
			<div class="item">
				<input type="button" class="submit" value="发表评论" id="btnReplyComment" onclick="doReply()" />
			</div>
		</form>
	</div>
	<link rel="stylesheet" rev="stylesheet" href="${template_url}/script/fancybox/jquery.fancybox.css" type="text/css" />
	<script type="text/javascript" src="${template_url}/script/fancybox/jquery.fancybox.pack.js"></script>
	<script type="text/javascript">
		function doSubmit(){
			$("#btnPostComment").val('正在提交...');
			$("#btnPostComment").attr('disabled', 'disabled');
			$("#btnPostComment").addClass('disabled');
			$("#comment-form").submit();
		}
		
		function showReply(id){
			$('#reply_comment').val(id);
			$.fancybox.open({
				href:'#replyform'
			});
		}
		
		function doReply(){
			$("#btnReplyComment").val('正在提交...');
			$("#btnReplyComment").attr('disabled', 'disabled');
			$("#btnReplyComment").addClass('disabled');
			$("#reply-form").submit();
		}
	</script>
<#else>
	<h2>评论已关闭</h2>
</#if>

